<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>网页报告</title>
    <style>
        h1 {
            text-align: center;
        }
            h2 {
                text-align: center;
            }
            p {
                font-size: large;
                margin-left:100px ;
                line-height: 1.8;
            }
            .a {
                color: coral;
            }
        body { 
  background: url(https://img2.baidu.com/it/u=2923260873,3407377796&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500) no-repeat center fixed; 
  background-size: cover;
}
div.b {
  margin: 5px;
  border: 1px solid #ccc;
  width: 500px;
}

div.b:hover {
  border: 1px solid #777;
}

div.b img {
  width: 100%;
  height: auto;
}

div.c {
  padding: 5px;
  text-align: center;
}
table {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #777;
}
.d th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

 .d tr:hover {background-color:#f5f5f5;}
    </style>
</head>
<body>
    <h1>网页报告</h1>
    <h2>人员信息</h2>
    <p>班级：软件2211班</p>
    <p>组长：吴思航；学号：0223613</p>
    <p>组员：刘名明；学号：0223715</p>
    <p>人数：2</p>
    <h2>网站介绍</h2>
    <p>名称：完美世界</p>
    <p>主题：动漫</p>
    <p>动机：鉴于大多数人比较喜欢看动漫，而国漫也崛起了，让大家更多地了解国漫成果，及国漫技术进步。</p>
    <h2>网站设计</h2>
    <p>内容板块：页头区、中心区、页脚区、人物海报、打斗视频、动漫介绍、影片评价、二级导航栏（伪类、黏性定位）、精彩图集（浮动图片）、侧边栏（子网页）、境界划分（表格）、有序列表、无序列表、文字悬浮图片、圆框图片链接、锚点等</p>
    <p>页面组织结构：总计10张网页。
        <p>一张主页：分为页头、中心区、页脚三部分，页头是图片、视频，中心区是文字内容、图集，页脚是图片链接的实验报告，内容布局大致是中心区部分，网页颜色分为黑色、白色两部分。</p>
        <p>8张子页：每个子页都有图片修饰。</p>
        <p>一张实验报告：文本修饰。</p>
       <h2>网站内容</h2>
        <p class="a">主要技术：css,少部分js。</p>
        <table>
            <tr>
                <td>
                    <div class="b"><img src="1.gif"><div class="c">主要采用了css技术，用了一点js技术，采用了fixed定位在中间及圆框效果。</div></div>
                </td>
                <td><div class="b"><img src="2.gif"><div class="c">采用css技术，页头采用css浮动，中间用css插入一段视频，中心区做了二级导航栏，鼠标移到字体上变色，移到下拉框有阴影。</div></td>
            </tr>
            <tr><td>
                <div class="b"><img src="3.gif"><div class="c">采用css技术，浮动定位居中和动图效果，鼠标悬浮阴影，右下方fixed定位。</div></div>
            </td>
        <td>
            <div class="b"><img src="4.gif"><div class="c">实验报告采用圆框效果，图片链接，阴影，返回首页为锚点,侧边栏在子网页，更多特效在子网页。</div></div>
        </td>    
        </tr>
        <p class="a">用到的工具：Visual Studio Code</p>
        <p class="a">主要内容与步骤：介绍完美世界，从主页看一段视频，在导航栏进入子网页，最后实验报告。</p>
        <p class="a">遇到的问题：内外边距难以把控，js难以运用，子网页图片悬浮放大不熟悉，视频自动播放和循环播放花了好长时间，排版不熟悉。</p>
        <p class="a">失败的部分：</p>
        <p class="a">1、背景透明度设置失败</p>
        <p class="a">2、用js去实现网页跳转失败</p>
        <p class="a">3、图片设计炫酷阴影没成功，3D转换失败</p>
        <p class="a">4、用js做轮播图片失败</p>
        <p class="a">亮点：首页弹窗、视频循环播放、圆角边框、图片链接、鼠标悬停图片放大</p>
        </table>
    </p>
    <h2>最终结果和讨论</h2>
   <div class="d">
   <table align="center">
    <tr><td>自我评价：花费了6天时间边学边做，基础知识还不够牢靠，对poistion定位的掌握不够精练，但页面总体还是较满意的，js运用少，在做网页过程中学会了子父元素差异。</td></tr>
    <tr><td>总结：基本上把课上学的知识都运用了，但是有一部分知识不能随心所用，不过在自己动手制作网页过程中能学到很多东西，html是基础，css做出来的效果比html看起来更炫酷，网页制作得清楚整体页面布局。</td></tr>
    <tr><td>展望：希望以后能够设计出精美、布局美观的网页，学好js制作出炫酷的动画，在web上能够自由发挥，同时网页布局能够更多样化，敲代码速度提升。</td></tr>
   </table></div>
   <h2>最后非常感谢辜勇老师在学习过程中的耐心教导！</h2>
</body>